<template>
  <!-- 主页欢迎页组件 -->
  <div>
    <div class="homeTop">
      <img src="@/assets/img/topBgImg.jpg" alt="">

      <div class="jumbotron topSee text-center" style="border-radius: 0px;">
        <h2 class="d-none d-sm-block">Welcome!</h2>
        <p class="lead">欢迎来到本站，本站为读书爱好者提供书籍阅读与下载，若有疑问请联系我们</p>
        <hr class="my-4">
        <p>点击查看更多书籍分类</p>
        <p class="lead">
          <router-link to='/details' class="btn btn-primary btn-lg">Come do it</router-link>
        </p>
      </div>
      
    </div>
  </div>
</template>

<script scoped>
  export default {
    name: 'HomeTop',
    data () {
      return {

      }
    }
  }

</script>

<style scoped>
  .homeTop{
    position: relative;
  }

  .topSee{
    width: 100%;
    height: 50%;
    background-color: rgba(233, 236, 239, .6);
    position: absolute;
    top: 0;
    /* bottom: -32px; */
  }

  .home img {
      width: 100%;
    }

  @media (max-width: 575px) {
    .home img {
      height: 40vh;
    }
    .topSee {
      height: 100%;
    }
  }

  @media (min-width: 576px) and (max-width: 767px) {
    .home img {
      height: 60vh;
    }
    .topSee {
      height: 100%;
    }
  }

  @media (min-width: 768px) and (max-width: 991px) {
    .home img {
      height: 50vh;
    }
    .topSee {
      height: 60%;
    }
  }

  @media (min-width: 992px) and (max-width: 1199px) {
    .home img {
      height: 60vh;
    }
  }

  @media (min-width: 1200px) {
    .home img {
      height: 100vh;
    }
  }
</style>